<template>
    <div class="main main_bg" :style="$store.state.isApp?'paddingTop:.2rem':'paddingTop:1.1rem'">
      <gltitle :titleSize="titleSize" :is_mt="is_mt" v-if="!$store.state.isApp" ></gltitle>

      <div class="container">
        <div class="it1">
          <div class="boxshadow tac">
            {{datainfo.staffName}}
          </div>
        </div>
        <div class="it2">
          <div class="boxshadow">
            <div class="top db">
              <div class="name flex">{{$t('staff.doc6')}}</div>
              <div class="select" @click="time_show = true">
                <span>{{date}}</span><van-icon name="arrow-down" />
              </div>
            </div>
            <ul class="list wrap bet">
              <li>
                <p><span class="c-999">{{$t('staff.doc7')}}: </span>{{datainfo.rechargeAmount}}</p>
                <p><span class="c-999">{{$t('staff.doc8')}}: </span>{{datainfo.proportion}}%</p>
                <p><span class="c-999">{{$t('staff.doc9')}}: </span>{{datainfo.financialAmount}}</p>
                <!--<p><span class="c-999">动态工资: </span>{{datainfo.dynamicSalary}}</p>-->
                <p v-if="datainfo.partner"><span class="c-999">{{$t('staff.doc10')}}:</span>{{datainfo.dividendAmount}}</p>
              </li>
              <li>
                <p><span class="c-999">{{$t('staff.doc11')}}: </span>{{datainfo.withdrawAmount}}</p>
                <p><span class="c-999">{{$t('staff.doc12')}}: </span>{{datainfo.totalPerformanceAmount}}</p>
                <p><span class="c-999">{{$t('staff.doc13')}}: </span>{{datainfo.minerAmount}}</p>
                <!--<p><span class="c-999">销售提成: </span>{{datainfo.salesCommission}}</p>-->
              </li>
            </ul>
          </div>
        </div>

        <div class="it3">
          <div class="boxshadow">
            <ul>
              <li class="db" @click="link('/staff/so')">
                <div class="flex">
                  <div class="name">{{$t('staff.doc14')}}</div>
                  <p class="c-999">{{$t('staff.doc15')}}</p>
                </div>
              </li>
              <li class="db" @click="link('/staff/czmx')">
                <div class="flex">
                  <div class="name">{{$t('staff.doc16')}}</div>
                  <p class="c-999">{{$t('staff.doc17')}}</p>
                </div>
                <div class="str">{{datainfo.totalRechargeAmount}} USDT</div>
              </li>
              <li class="db" @click="link('/staff/txmx')">
                <div class="flex">
                  <div class="name">{{$t('staff.doc18')}}</div>
                  <p class="c-999">{{$t('staff.doc19')}}</p>
                </div>
                <div class="str">{{datainfo.totalWithdrawAmount}} USDT</div>
              </li>
              <li class="db" @click="link('/staff/team')">
                <div class="flex">
                  <div class="name">{{$t('staff.doc20')}}</div>
                  <p class="c-999">{{$t('staff.doc21')}}</p>
                </div>
                <div class="str">{{datainfo.peopleNumber}}人</div>
              </li>
            </ul>
          </div>
        </div>
      </div>



      <div class="mob" v-if="datainfo.warnDisplay">
        <p>
          {{datainfo.warnMsg}}
        </p>
      </div>


      <van-popup v-model="time_show" position="bottom">

      <van-datetime-picker
        v-model="currentDate"
        type="year-month"
        title=""
        item-height=".8rem"
        :columns-order="['year', 'month']"
        :formatter="formatter"
        @confirm="timeConf"
        :max-date="maxDate"
        :cancel-button-text="$t('word.cancle')"
        :confirm-button-text="$t('word.ok')"
      />
      </van-popup>



    </div>
</template>
<script>


  export default {
  data(){
    return {
      it:0,
      if_check:false,
      titleSize:this.$t('staff.doc1'),
      is_mt:true,
      // titleRight: "<img src=" + require("../../public/images/ico_10_10.png") + ">"
      datainfo:'',
      date:'',
      currentDate: new Date(),
      maxDate:new Date(),
      time_show:false

    }
  },

    created() {
      this.date = this.$moment(this.currentDate).format("YYYY-MM");
      this.getdata()
    },
    mounted() {


    },
    methods: {
      getdata(){
        this.$post(this.URL.staff.data,{
          date:this.date +  '-01'
        }).then((res) => {
          if (res.code == 0) {
            this.datainfo = res.data;
          }
        });
      },
      timeConf(value) {
        this.time_show = false;
        this.date = this.$moment(value).format("YYYY-MM");
        this.getdata()
      },
      formatter(type, val) {
        if (type === 'year') {
          return `${val}` + this.$t('model.year');
        } else if (type === 'month') {
          return `${val}` + this.$t('model.month');
        } else if (type === 'day') {
          return `${val}` + this.$t('model.day');
        }
        return val;
      },
      preserve(){

      },
      link(url){
        this.$router.push({
          path: url,
        });
      },

    },


}

</script>


<style lang="less" scoped>
  #app {
    .mob {
      position: fixed;bottom:.4rem;left:0;
      width: 100%;
      z-index: 100;
      p {
        width: 5.9rem;
        background: rgba(0,0,0,0.6);
        border-radius: .18rem;
        margin: 0 auto;
        padding: .2rem .5rem;
        font-size: .26rem;
        color: #fff;
        text-align: center;
      }
    }
    .container {
      padding: 0 .2rem;
      padding-bottom: 1.8rem;
      .it1 {
        .boxshadow {
          height: .9rem;
          line-height: .9rem;
          font-size: .32rem;
          font-weight: 500;
          color: #043fd6;
        }
      }
      .it2 {
        .boxshadow {
          padding: 0 .3rem;
          .top {
            border-bottom: .01rem solid #ececec;
            padding: .18rem 0;
            height: 1rem;
            .name {
              font-weight: 500;
              color: #333333;
            }
            .select {
              width: 2.56rem;
              height: .6rem;
              border: .02rem solid #cccccc;
              border-radius: .1rem;
              line-height: .56rem;
              text-align: center;
              font-size: .26rem;
              i {
                color: #ccc;
                font-size: .26rem;
                vertical-align: middle;
                margin-left: .4rem;
              }
            }
          }
          ul {
            padding: .2rem 0;
            li {
              width: 48%;
              p {
                padding: .1rem 0;
              }
            }
          }
        }
      }
      .it3 {
        .boxshadow {
          padding: 0 .3rem;
          li {
            border-bottom: .01rem solid #eee;
            height: 1.2rem;
            .name {
              font-size: .28rem;
            }
            p {
              font-size: .22rem;
            }
            .str {
              font-size: .3rem;
              font-weight: 500;
            }
          }
        }
      }
    }
  }
</style>
